<template>
	<view class="page-cont">
		<navbar title="数据查询"></navbar>

		<!-- 项目切换 -->
		<view class="project-select" @click="handleOpen">
			<view class="project-name">{{deviceName}}</view>
			<image class="project-arrow" :src="isOpen ? '/static/up_black.png' : '/static/down_black.png'"></image>
		</view>
		<tab :tabActive="tabActive" :tabs="tabList" @tabChange="handleTabChange"></tab>

		<view class="main-cont" :style="{height: pageHeight}">
			<!-- 图表 -->
			<view class="chart-cont" v-show="tabActive==0">
				<view class="chart-box">
					<image class="chart-fullscreen" src="/static/fullscreen.png" @click="handleFullscreen"></image>
					<fan-chart :chartData="chartData" :chartTitle="chartTitle" :isSwitch="isSwitch"></fan-chart>
				</view>
			</view>
			<!-- 表格 -->
			<scroll-view class="table-cont" v-show="tabActive==1" scroll-y>
				<uni-table style="width: 100%;" border emptyText="暂无相关数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th>日期</uni-th>
						<uni-th>数据</uni-th>
					</uni-tr>

					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in chartData" :key="index">
						<uni-td>{{item.time?item.time:"-"}}</uni-td>
						<uni-td>{{item.num?item.num:"-"}}</uni-td>
					</uni-tr>
				</uni-table>
			</scroll-view>
		</view>

		<!-- 弹框选择项目 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in deviceList" :key="index"
					@click="handleTypeChange(item)">{{item.name}}</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, getCurrentInstance } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import { storeToRefs } from 'pinia';
	import useUserStore from '@/store/user.js';
	import useHomeStore from '@/store/home';
	import * as homeApi from '@/api/home.js'
	import FanChart from "@/pages/home/components/fan-chart.vue"
	const homeStore = useHomeStore();
	const { proxy } = getCurrentInstance();
	const { pageHeight, sysStatusBarHeight } = useNavbar();
	const { projectId } = storeToRefs(homeStore);
	const isOpen = ref(false)
	const typeList = ref([])
	const popup = ref()
	const deviceName = ref("")
	const deviceList = ref([])

	const id = ref();
	const typeId = ref();
	const groupid = ref();
	const key = ref();
	const startTime = ref();
	const endTime = ref();

	const tabList = ref(["图表", "表格"])
	const tabActive = ref(0)

	const chartData = ref([])
	const isSwitch = ref(false)
	const chartTitle = ref('温度')

	onLoad((query) => {
		console.log(query)
		id.value = query?.id;
		groupid.value = query?.groupid;
		typeId.value = query?.typeId;
		key.value = query?.key;
		startTime.value = query?.startTime;
		endTime.value = query?.endTime;
		deviceName.value = decodeURIComponent(query?.name);

		homeStore.setDeviceId(groupid.value);
		homeStore.setDeviceName(deviceName.value);
		Object.keys(homeStore.projectModus).forEach(key => {
			homeStore.projectModus[key].forEach(item => {
				if (groupid.value == item.pid) {
					deviceList.value.push(item)
				}
			})
		});
		getData();
	});

	const handleTabChange = (e) => {
		tabActive.value = e
	}

	const handleFullscreen = (e) => {
		uni.navigateTo({
			url: '/pages/home/detail-chart-landscape'
		});
	}

	const getData = () => {
		chartData.value = [];
		homeApi.getDataHistory({ "keys": key.value, "startTime": startTime.value, "endTime": endTime.value }).then(res => {
			let arr = res[key.value];
			if (arr && arr.length) {
				arr.forEach(element => {
					if (element && element.length) {
						chartData.value.push({
							time: proxy.dayjs(element[0]).format('YYYY-MM-DD HH:mm:ss'),
							num: element[1],
						});
					}
				});
			}
		});
	}


	// 下拉选择设施类型
	const handleOpen = () => {
		isOpen.value = true;
		popup.value.open();
	}

	// 设施类型选中
	const handleTypeChange = (item) => {
		isOpen.value = false;
		popup.value.close();
		deviceName.value = item.name;
		key.value = `${typeId.value}_0_${item.id}_0`;
		homeStore.setDeviceId(item.id);
		homeStore.setDeviceName(item.name);
		getData();
	}
</script>

<style lang="scss" scoped>
	.page-cont {

		.main-cont {
			box-sizing: border-box;
			margin: 25rpx;

			.chart-box {
				border: 1px solid #FAFAFC;
				border-radius: 5px;
				background-color: #fff;


				.chart-fullscreen {
					position: relative;
					left: calc(100% - 40px);
					padding: 10px;
					width: 40px;
					height: 40px;
					box-sizing: border-box;
				}
			}

			.table-cont {
				border-radius: 5px;
				background-color: #fff;
				box-sizing: border-box;

				::v-deep .uni-table {
					min-width: 300px !important;
				}

				::v-deep .uni-table-th {
					padding: 6px 10px !important;
					background-color: #F2F3F9;
				}


				::v-deep .uni-table-td {
					color: #6E84A2;
				}
			}
		}

		.project-select {
			height: 40px;
			line-height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			border-bottom: 1px solid #ccc;

			.project-name {
				color: #666;
				font-size: 14px;
			}

			.project-arrow {
				padding-left: 10px;
				width: 16px;
				height: 16px;
			}
		}

		.popup-cont {
			background: #fff;
			max-height: 80vh;
			z-index: 102;

			.popup-title,
			.popup-header {
				height: 50px;
				line-height: 50px;
				color: #333;
				font-size: 14px;
				text-align: center;
				border-top: 1px solid #eee;
			}

			.popup-header {
				font-size: 16px;
				font-weight: 600;
			}
		}
	}
</style>